﻿<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Concrete Calculator</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style type="text/css">
        body {font-family:Calibri, Helvetica, Arial, sans-serif; font-size:14px; background-color:#950; margin:0; padding:0;}
        .concrete-calc {
            width: 760px;
            margin: 0 auto;
            padding: 0 20px 20px;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .concrete-calc label {
            width: 8em;
            text-align: right;
            display: inline-block;
            font-weight: bold;
        }
        .radio label {width:auto; text-align:left; display:inline-block;; font-weight:normal;}
        .ui-tabs-nav a{
            background-color: #eee;
            border: 1px solid #ccc;
            display: inline-block;
            padding: 5px 8px;
            text-decoration: none;
            color: #333;
            margin-right:4px;
            font-weight:bold;
        }
        .ui-tabs-nav {background-color:#eee; list-style-type:none; padding:0; margin:0; border-bottom:1px solid #ccc; padding:5px 8px;}
        .ui-tabs-nav > li {display:inline-block;}
        .ui-tabs-active a {background-color: #fff;}
        .ui-tabs {border:1px solid #ccc;}
        .ui-tabs-panel {padding:10px;}
        input {padding:2px; font-size:16px; margin:0;}
        button {padding:4px 8px; border:1px solid #ccc;}
        button.sel {background-color:#fff;}
    </style>
</head>
<body>
    <div class="concrete-calc">
        <h2>Concrete Calculator</h2>
        <div class="tabs">
            <ul>
                <li><a href="#slabs">Slabs</a></li>
                <li><a href="#columns">Columns</a></li>
            </ul>
            <div id="slabs">
                <p>Enter the depth, width and length of your concrete slab to calculate the number of cubic yards and concrete bags needed to complete your project..</p>
                <p>
                    <label for="sT">Thickness:</label>
                    <input type="number" id="sT" min="1" max="99999" maxlength="5" value="0" />
                    <button class="sel">inches</button><button>feet</button>
                </p>
                <p>
                    <label for="sW">Width:</label>
                    <input type="number" id="sW" min="1" max="99999" maxlength="5" value="0" />
                    <button class="sel">inches</button><button>feet</button>
                </p>
                <p>
                    <label for="sL">Length:</label>
                    <input type="number" id="sL" min="1" max="99999" maxlength="5" value="0" />
                    <button class="sel">inches</button><button>feet</button>
                </p>
                <p>
                    <label for="sQ">Quantity:</label>
                    <input type="number" id="sQ" min="1" max="99999" maxlength="5" value="1" />
                </p>
                    <h3>Totals</h3>
                <p class="sYards">
                    <label>Cubic Yards: </label>
                    <span></span>
                </p>
            </div>
            <div id="columns">
                <p>
                    <label for="cT">Diameter:</label>
                    <input type="number" id="sT" min="1" max="99999" maxlength="5" /> inches
                </p>
                <p>
                    <label for="sW">Length:</label>
                    <input type="number" id="sW" min="1" max="99999" maxlength="5" /> inches
                </p>
                <p>
                    <label for="sQ">Quantity:</label>
                    <input type="number" id="sQ" min="1" max="99999" maxlength="5" />
                </p>
                <h3>Totals</h3>
                <p class="sYards">
                    <label>Cubic Yards: </label>
                    <span></span>
                </p>
            </div>
        </div>
    </div>
    <script>
        $(".tabs").tabs();
        $(".radio").buttonset();
        $("#sReset").click(function () {

        });
        $("#sCalc").click(function () {

        });
        $(".concrete-calc button").click(function (evt) {
            if (!($(evt.target).hasClass("sel"))) {
                $(evt.target).addClass("sel").siblings("button").removeClass("sel")
                var input = $(evt.target).closest("p").find("input");
                if ($(evt.target).html() == "inches") {
                    $(input).val($(input).val() * 12);
                }
                else {
                    $(input).val($(input).val() / 12);
                }
                
            }
        });
        $("#slabs input").change(function () {
            var T = $("#sT").val();
            var W = $("#sW").val();
            var L = $("#sL").val();
            if ($("#sT").siblings(".sel").html() == "feet") {
                T = T * 12;
            }
            if ($("#sW").siblings(".sel").html() == "feet") {
                W = W * 12;
            }
            if ($("#sL").siblings(".sel").html() == "feet") {
                L = L * 12;
            }
            var ci = (T * W * L);
            var cy = ci / 46656;
            $(".sYards span").html(cy);
        });
    </script>
</body>
</html>
